<template>
  <div class="goodsinfo-container">
    <div class="mui-card" v-for="(item,i) in goodsList" :key="item.id">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <mt-switch
            v-model=" $store.getters.getAllSelected[item.id]"
            @change="changeState(item.id,$store.getters.getAllSelected[item.id])"
          ></mt-switch>
          <img :src="item.thumb_path" alt />
          <div class="info">
            <h1>{{ item.title }}</h1>
            <span class="price">￥{{ item.sell_price }}</span>
            <infobox :initcount="$store.getters.getAll[item.id]" :goodsid="item.id"></infobox>
            <a href="#" @click.prevent="remove(item.id,i)">删除</a>
          </div>
        </div>
      </div>
    </div>

    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner jiesuan">
          <div class="left">
            <p>总计(不含运费)</p>
            <p>
              已勾选商品：
              <span class="red">{{ $store.getters.getCountAndAmount.count }}</span> 件，总价：
              <span class="red">￥{{ $store.getters.getCountAndAmount.amount }}</span>
            </p>
          </div>
          <mt-button type="danger" size="small">去结算</mt-button>
        </div>
      </div>
    </div>
    <p>{{ $store.getters.getAllSelected}}</p>
  </div>
</template>
<script>
import infobox from "../subcomponents/infobox.vue";
export default {
  data() {
    return {
      goodsList: []
    };
  },
  created() {
    this.getGoodsList();
  },
  methods: {
    //传递参数的正确写法
    // getGoodsList() {
    //     //获取到 store 中 所有的商品的 Id,然后拼接出一个用逗号分隔的字符串
    //   var allId = [];
    //   this.$store.state.car.forEach(element => {
    //     allId.push(element.id);
    //   });
    //   //如果 购物车中没有商品，则直接返回，不需要请求数据接口，否则会报错
    //   if (allId.length <= 0) {
    //     return;
    //   }
    //   //获取购物车商品列表
    //   this.$http.get(""+allId.join(',')).then(result => {
    //     if (result.body.status === 0) {
    //          this.goodsList = result.body.message
    //     }
    //   });
    // }
    //无参数可写的凑活写法
    getGoodsList() {
      this.$http.get("shopcarlist.json").then(result => {
        if (result.body.status === 0) {
          this.goodsList = result.body.message;
        }
      });
    },
    remove(id, index) {
      this.goodsList.splice(index, 1);
      this.$store.commit("remove", id);
    },
    changeState(id, val) {
      this.$store.commit("updateState",{
        id,
        selected:val
      })
    }
  },
  components: {
    infobox
  }
};
</script>
<style lang="less" scoped>
.goodsinfo-container {
  background-color: #eee;
  overflow: hidden;
  .mui-card-content-inner {
    display: flex;
  }
  h1 {
    font-size: 13px;
  }
  img {
    width: 60px;
    height: 60px;
  }
  .price {
    color: red;
    font-size: 14x;
    font-weight: bold;
  }

  .jiesuan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .red {
      font-size: 16px;
      color: red;
      font-weight: bold;
    }
  }
}
</style>
